<template>
	<el-card class="layout-query">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item prop="taskName">
				<el-input v-model="state.queryForm.taskName" placeholder="作业名称"></el-input>
			</el-form-item>
			<el-form-item prop="studentName">
				<el-input v-model="state.queryForm.studentName" placeholder="学生名称"></el-input>
			</el-form-item>
			<el-form-item prop="className">
				<el-input v-model="state.queryForm.className" placeholder="班级名"></el-input>
			</el-form-item>
			<el-form-item prop="courseName">
				<el-input v-model="state.queryForm.courseName" placeholder="课程名"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" type="primary" @click="getList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card>

		<el-table v-loading="state.dataListLoading" :data="data.dataList" border class="layout-table"
			show-overflow-tooltip @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="taskName" label="作业主题" header-align="center" align="center"></el-table-column>
			<el-table-column prop="startTime" label="作业开始时间" header-align="center" align="center"></el-table-column>
			<el-table-column prop="endTime" label="作业结束时间" header-align="center" align="center"></el-table-column>
			<el-table-column label="学生名称" header-align="center" align="center">
				<template #default="scope">
					<el-text type="primary">{{ scope.row.studentName }}</el-text>
				</template>
			</el-table-column>
			<el-table-column prop="className" label="班级名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="courseName" label="课程名称" header-align="center" align="center"></el-table-column>
			<el-table-column label="教师得分" header-align="center" align="center">
				<template #default="scope">
					<el-text type="warning">{{ scope.row.userScore || '未评' }} </el-text>
				</template>
			</el-table-column>
			<el-table-column label="大模型得分" header-align="center" align="center">
				<template #default="scope">
					<el-text type="primary">{{ scope.row.aiScore || '未评'}}</el-text>
				</template>
			</el-table-column>

			<el-table-column label="作业得分" fixed="right" header-align="center" align="center">
				<template #default="scope">
					<el-text type="success">{{ scope.row.score }}</el-text> / <el-text>{{
						scope.row.totalScore }}</el-text>
				</template>
			</el-table-column>
			<el-table-column label="状态" fixed="right" header-align="center" align="center" width="100">
				<template #default="scope">
					<el-tag :type="getStatusType(scope.row.taskState)">
						{{ getStatusLabel(scope.row.taskState) }}
					</el-tag>
				</template>
			</el-table-column>

			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="250">
				<template #default="scope">
					<el-button type="primary" link @click="goToTaskDetail(scope.row.taskId,scope.row.userId)">查看学生作业</el-button>
					<!-- <el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button> -->
					<el-button type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :current-page="state.page" :page-sizes="state.pageSizes" :page-size="state.limit"
			:total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChangeHandle"
			@current-change="currentChangeHandle">
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" v-model:visible="addOrUpdateVisible"
			@refreshDataList="getDataList"></add-or-update>
	</el-card>
</template>

<script setup lang="ts" name="StudentTaskList">
import { useCrud } from '@/hooks'
import { reactive, nextTick, ref, onMounted } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { useRoute, useRouter } from 'vue-router';

import { getDataList } from '@/api/smstu/task';
const router = useRouter();
const state: IHooksOptions = reactive({
	dataListUrl: '/sm/task/stu/admin/page',
	deleteUrl: '/sm/task',
	queryForm: {
		courseUserId: null,
		taskName: null,
		studentName: null,
		className: null,
		courseName: null,
	}
})
const data = ref({
	dataList:[]
})
// 状态类型配置
const statusConfig: Record<string, { label: string; type: string }> = {
	'0': { label: '未开始', type: 'warning' },
	'1': { label: '未完成', type: 'danger' },
	'2': { label: '已保存', type: 'info' },
	'3': { label: '已评估', type: 'primary' },
	'4': { label: '已完成', type: 'success' },
	'5': { label: '已总结', type: 'primary' },
}

const dataForm = reactive({
	courseClassList: [] as Array<{ id: number; className: string; classCode: string }>,
})

const queryRef = ref()
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref()
// const addOrUpdateHandle = (id?: number) => {
// 	addOrUpdateVisible.value = true
// 	nextTick(() => addOrUpdateRef.value.init(id))
// }
// 跳转创建作业页面
const goToTaskDetail = (taskId?: string,userId?:number) => {
	router.push({
        path: '/smstu/task/taskDetail',
        query: {
			taskId,
			userId
        }
    });
};

onMounted(() => {

	// getSketchClass().then(res => {
	// 	dataForm.courseClassList = res.data
	// 	// 默认选中第一个班级
	// 	if (res.data.length > 0) {
	// 		state.queryForm.courseUserId = res.data[0].id
	// 	}
	// 	getDataList()
	// })
	getDataList(state.queryForm).then((res:any) => {
		data.value.dataList = res.data
		console.log(res.data)
	})
})

const getList = () => {
	getDataList(state.queryForm).then((res:any) => {
		data.value.dataList = res.data
	})
}
// 获取状态类型（直接通过状态码访问）
const getStatusType = (status: string | number) => {
	const key = String(status) // 确保类型一致
	return statusConfig[key]?.type || 'info' // 默认值
}

// 获取状态文本（直接通过状态码访问）
const getStatusLabel = (status: string | number) => {
	const key = String(status)
	return statusConfig[key]?.label || '未知状态' // 默认值
}
const {selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, downloadHandle, reset } = useCrud(state)
</script>
